<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        function testJson() {
            var username = $("#username").val();
            var password = $("#password").val();
            var age = $("#age").val();
            $.ajax({
                //发送请求的URL字符串
                url: "testJson",
                //请求类型
                type: "post",
                //定义发送请求的数据格式为JSON字符串
                contentType: "application/json",
                //data表示发送的数据，需要传输的是字符串
                data: JSON.stringify({username: "123", password: "password", age: "123"}),
                //成功响应的结果---
                success: function (data) {
                    if (data != null) {
                        console.log(data);
                        console.log(data.username);
                        console.log(data.password);
                        console.log(data.age);
                    }
                },
                //请求出错
                error: function () {
                    alert("数据发送失败");
                }
            });
        }

    </script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">处理JSON数据</h3>
    </div>
</div>
<div class="container">
    <div>
        <h4>添加用户</h4>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <form class="form-horizontal" action="">
                <div class="form-group">
                    <div class="input-group col-md-6">
                     <span class="input-group-addon">
                        <i class="glyphicon glyphicon-pencil"></i>
                     </span>
                        <input class="form-control" type="text"
                               id="username" placeholder="请输入用户名"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-md-6">
                     <span class="input-group-addon">
                        <i class="glyphicon glyphicon-pencil"></i>
                     </span>
                        <input class="form-control" type="password"
                               id="password" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-md-6">
                     <span class="input-group-addon">
                        <i class="glyphicon glyphicon-pencil"></i>
                     </span>
                        <input class="form-control" type="text"
                               id="age" placeholder="请输入年龄"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">
                        <div class="btn-group btn-group-justified">
                            <div class="btn-group">
                                <button type="button" onclick="testJson()" class="btn btn-success">
                                    <span class="glyphicon glyphicon-share"></span>
                                    &nbsp;测试
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>